<template>
	<view class="propsers">
		<view class="propsers-margin"></view>
		<scroll-view scroll-y="true"
					 class="scroll-Y"
					 @scrolltolower="toLower">
			<view class="propsers-item">
				<view class="item" @click="propserItem(item.applyId)" v-for="item in proList" :key="item.uid">
					<view><image style="width: 120rpx;height: 120rpx;border-radius: 100%;" :src="item.avatar" mode="aspectFill"></image></view>
					<view class="item-info">
						<view class="info-base">
							<view>{{item.nickname}}</view>
							<image src="../../../../static/img/nan.png" style="width: 40rpx;height: 40rpx;margin-left: 20rpx;" v-if="item.sex === 1" mode=""></image>
							<!-- <view class="base-sex" style="background-color: rgba(0, 149, 255, 0.08);">
								<u-icon name="man" color="#0095FF" size="25"></u-icon>
							</view> -->
							<image src="../../../../static/img/nv.png" style="width: 40rpx;height: 40rpx;margin-left: 20rpx;" v-if="item.sex === 0" mode=""></image>
							<!-- <view v-if="item.sex === 2" class="base-sex" style="background-color: rgba(255, 128, 128, 0.08);">
								<u-icon name="woman" color="#FF8080" size="25"></u-icon>
							</view> -->
						</view> 
						<view class="info-time">{{item.passTime}}</view>
						<view class="info-sketch">{{item.remark}}</view>
					</view>
					<view class="item-out" v-if="item.disuse === -1"><image style="width: 96rpx;height: 70rpx;" src="@/static/user/out.png" mode="aspectFill"></image></view>
					<view class="item-out" v-if="item.disuse === 2"><image style="width: 96rpx;height: 70rpx;" src="@/static/user/choose.png" mode="aspectFill"></image></view>
					<view class="item-icon"><image style="width: 44rpx;height: 44rpx;border-radius: 100%;" src="@/static/user/more.png"></image></view>
				</view>
			</view>
			<view class="adopt-empty" v-if="proList.length === 0 && loading === false">
				<image style="width: 542rpx;height: 316rpx;" src="@/static/user/none1.png"></image>
				<view class="empty-text">暂无数据~</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				currentPage: 1,
				pageSize: 10,
				total: 0,
				adoptId: '',
				proList: [],
				reelect: false,
				loading: true
			}
		},
		methods: {
			propserItem (applyId) {
				uni.navigateTo({
				    url: './proposerDetails?applyId=' + applyId
				});
			},
			// 滚动到底部
			toLower (e) {
				console.log(e)
				if (this.proList.length < this.total) {
					this.currentPage++
					this.getProList()
				} else {
					this.currentPage = 1
					uni.showToast({
						title: '没有数据啦',
						icon: 'none'
					})
				}
			},
			// 加载中
			showLoading () {
				this.loading = true
				uni.showLoading({
				    title: '正在加载中',
					mask: true
				});
			},
			// 加载成功
			hideLoading () {
				uni.showToast({
				    title: '加载成功',
					icon: 'success',
					mask: true,
					complete: () =>{
						uni.hideLoading();
						this.loading = false
					}
				});
			},
			// 获取申请人列表
			getProList () {
				this.showLoading()
				this.$request(this.commonApi.proList + this.currentPage + '/' + this.pageSize, 'GET', {
					adoptId: this.adoptId
				}).then(res => {
					let items = res.data
					if (items.code !== 200) {
						uni.showToast({
							title: items.msg,
							icon: 'none'
						})
					} else {
						this.hideLoading()
						this.total = items.data.meta.total
						items.data.result.map(item => {
							this.proList.push(item)
						})
					}
				})
			}
		},
		onShow () {
			this.proList = []
			let that = this
			if (that.reelect) {
				uni.showToast({
					title: '重新选择领养人,会把前一个给覆盖掉哦',
					icon: 'none',
					success: function() {
						that.getProList()
					}
				})
			} else {
				this.getProList()
			}
		},
		onLoad (option) {
			this.adoptId = parseInt(option.adoptId)
			if (option.reelect) {
				this.reelect = option.reelect
			}
		}
	}
</script>

<style lang="scss" scoped>
	.propsers {
		height: 100vh;
		.scroll-Y {
			height: calc(100vh - 2rpx);
		}
		.propsers-margin  {
			width: 100%;
			height: 2rpx;
			background-color: #EDEDED;;
		}
		.propsers-item {
			.item {
				padding: 30rpx;
				display: flex;
				height: 180rpx;
				align-items: center;
				border-bottom: 2rpx solid #EDEDED ;
				position: relative;
				.item-out {
					position: absolute;
					top: 40rpx;
					left: 80rpx;
				}
				.item-info {
					height: 130rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 5;
					margin-left: 20rpx;
					.info-base {
						font-size: 28rpx;
						font-weight: 700;
						color: #333333;
						line-height: 40rpx;
						display: flex;
						align-items: center;
						.base-sex {
							width: 36rpx;
							height: 36rpx;
							border-radius: 2px;
							display: flex;
							justify-content: space-evenly;
							margin-left: 10rpx;
						}
					}
					.info-time {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
					}
					.info-sketch {
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
						width: 498rpx;
					}
				}
			}
		}
		.adopt-empty {
			padding: 100rpx 0 0 100rpx;
			.empty-text {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 44rpx;
				letter-spacing: 2rpx;
				padding-left: 200rpx;
				padding-top: 60rpx;
			}
		}
	}
</style>
